<template>
  <ui-table :data="tableData" size="medium" ref="uiTable" border fit :btnFixed="btnFixed" @selection-change="handleSelectionChange" :buttom-group="buttomGroup">
    <!-- 多选框 -->
    <template v-if="isSelect">
      <ui-table-column type="selection" width="55"> </ui-table-column>
    </template>
    <!-- 单选框 -->
   <template v-if="isRadio">
     <ui-table-column width="55" label="操作">
      <template slot-scope="scope">
      <ui-radio
        v-model="oppsitePort"
        @change="handleRadioChange(scope.row)"
        :label="scope.row.id">
        <span></span> 
      </ui-radio>
      </template>
    </ui-table-column>
   </template>
    <template v-for="(item, index) in columns">
      <ui-table-column
        :column-key="index + ''"
        :type="item.type"
        :prop="item.prop"
        :label="item.label"
        :fixed="item.fixed"
        :key="index"
        :width="item.width"
        align="center"
        :formatter="item.formatter"
      ></ui-table-column>
    </template>
    <template>
      <ui-table-column v-if="buttomGroup.length > 0" label="操作" :fixed="btnFixed" :width="btnGroupWidth">
        <template slot-scope="scope">
          <ui-button v-for="(item, index) in buttomGroup" :key="index" @click="clickMethods(item, scope.row)">{{ item.label }}</ui-button>
        </template>
      </ui-table-column>
      <ui-table-column v-if="customerStyle" label="操作" :fixed="btnFixed" :width="btnGroupWidth">
        <template slot-scope="scope">
          <slot name="operation" :scope="scope.row"></slot>
        </template>
      </ui-table-column>
    </template>
  </ui-table>
</template>

<script>
export default {
  name: 'comp-table',
  data(){
    return{
      oppsitePort:''
    }
  },
  filters: {
    formatters(val, format) {
      if (typeof format === 'function') {
        return format(val);
      } else return val;
    },
  },
  computed: {
    btnGroupWidth(){
      return this.buttomGroup.length * 80||150
    }
  },
  props: {
    isSelect: {
      type: Boolean,
      default: false,
    },
    isRadio: {
      type: Boolean,
      default: false,
    },
     customerStyle: {
      type: Boolean,
      default: false,
    },
    btnFixed: {
      type: [Boolean, String],
      default: false
    },
    buttomGroup: {
      type: Array,
      default: function() {
        return [];
      },
    },
    tableData: {
      type: Array,
      default: function() {
        return [];
      },
    },
    columns: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('multipleSelection', val);
    },
    clickMethods(methodsName, row) {
      this.$emit(methodsName.methodsName, row);
    },
    handleRadioChange(e) {
    this.$emit("getSelectData", e);
    },
  },
};
</script>
